<template>
  <div>
    <!-- 备忘录 -->
    <div v-if="$store.state.showList.node">
      <ul class="list"
          v-if="datalist.length!=0">
        <li v-for="(item,index) in datalist"
            :key="index">
          <div class="title">标题：{{(item.title!=""?item.title :item.text ) | subStr}}</div>
          <div class="time">时间：<i>{{item.dateNow}}</i>
            <button v-show="$store.state.edit"
                    @click="deleteItem(index)">✖删除
            </button></div>
          <div class="text">内容：{{item.text | subStr}}</div>
        </li>
        <div class="tipNull">没有数据了...</div>
      </ul>
      <div class="tipNull"
           v-else>当前数据为空...</div>
    </div>
    <!-- 日 程 -->
    <div v-if="$store.state.showList.date">
      <ul class="list"
          v-if="datalist.length!=0">
        <li v-for="(item,index) in datalist"
            :key="index">
          <div class="title">标题：{{(item.title!=""?item.title :item.text ) | subStr}}</div>
          <div class="time">时间：<i>{{item.dateNow}}</i>
            <button v-show="$store.state.edit"
                    @click="deleteItem(index)">✖删除
            </button></div>
          <div class="text">内容：{{item.text | subStr}}</div>
        </li>
        <div class="tipNull">没有数据了...</div>
      </ul>
      <div class="tipNull"
           v-else>当前数据为空...</div>
    </div>
    <!-- 账 单 -->
    <div v-if="$store.state.showList.bill">
      <ul class="list"
          v-if="datalist.length!=0">
        <li v-for="(item,index) in datalist"
            :key="index">
          <div class="title"
               style="color:red"
               v-if="item.type==0">支出：-{{(item.title!=""?item.title :item.text ) | subStr}}</div>
          <div class="title"
               style="color:green"
               v-else>收入：+{{(item.title!=""?item.title :item.text ) | subStr}}</div>
          <div class="time">时间：<i>{{item.dateNow}}</i>
            <button v-show="$store.state.edit"
                    @click="deleteItem(index)">✖删除
            </button></div>
          <div class="text">摘要：{{item.text | subStr}}</div>
        </li>
        <div class="tipNull">没有数据了...</div>
      </ul>
      <div class="tipNull"
           v-else>当前数据为空...</div>
    </div>
    <!-- 纪念日 -->
    <div v-if="$store.state.showList.rember">
      <ul class="list"
          v-if="datalist.length!=0">
        <li v-for="(item,index) in datalist"
            :key="index">
          <div class="title">标题：{{(item.title!=""?item.title :item.text ) | subStr}}</div>
          <div class="time">时间：<i>{{item.dateNow}}</i>
            <button v-show="$store.state.edit"
                    @click="deleteItem(index)">✖删除
            </button></div>
          <div class="text">内容：{{item.text | subStr}}</div>
        </li>
        <div class="tipNull">没有数据了...</div>
      </ul>
      <div class="tipNull"
           v-else>当前数据为空...</div>
    </div>
  </div>
</template>
<script>
export default {
  filters: {
    subStr (res) {
      if (res.length > 10) {
        return res.substring(0, 10) + "..."
      }
      return res
    }

  },
  data () {
    return {
      datalist: []
    }
  },
  mounted () {
    this.showList('node')
    this.$store.commit('changeList', 'node')
  },
  methods: {
    /* 展示所有事务/日程/账单/纪念日 */
    showList (res) {
      var list = "";
      switch (res) {
        case 'node':
          list = localStorage.getItem("nodes")
          break;
        case 'date':
          list = localStorage.getItem("dates")
          break;
        case 'bill':
          list = localStorage.getItem("bills")
          break;
        case 'rember':
          list = localStorage.getItem("rembers")
          break;
      }
      // 从本地拿出数据逆序排列
      if (list != null && list != "") {
        this.datalist = JSON.parse(list).reverse()
      } else {
        this.datalist = []
      }
    },
    /* 删除记录 */
    deleteItem (index) {
      this.datalist.splice(index, 1);
    }
  },
  watch: {
    "$store.state.showList.node": function (newf, oldf) {
      if (newf) {
        this.showList('node')
      }
    },
    "$store.state.showList.date": function (newf, oldf) {
      if (newf) {
        this.showList('date')
      }
    },
    "$store.state.showList.bill": function (newf, oldf) {
      if (newf) {
        this.showList('bill')
      }
    },
    "$store.state.showList.rember": function (newf, oldf) {
      if (newf) {
        this.showList('rember')
      }
    },
    "$store.state.save": function (newf, oldf) {
      switch (newf) {
        case 'node':
          var list = [...this.datalist];
          list = list.reverse();
          localStorage.setItem('nodes', JSON.stringify(list));
          break;
        case 'date':
          var list = [...this.datalist];
          list = list.reverse();
          localStorage.setItem('dates', JSON.stringify(list));
          break;
        case 'bill':
          var list = [...this.datalist];
          list = list.reverse();
          localStorage.setItem('bills', JSON.stringify(list));
          break;
        case 'rember':
          var list = [...this.datalist];
          list = list.reverse();
          localStorage.setItem('rembers', JSON.stringify(list));
          break;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 18px;
}
.time,
.text {
  color: #999;
}
.list {
  overflow: auto;
  height: 75vh;
  li {
    background: #fff9;
    padding: 10px;
    margin: 10px 0;
  }
}
button {
  background: none;
  border: none;
  color: #f00;
  float: right;
  margin-right: 20px;
}
.tipNull {
  text-align: center;
  padding: 20px;
  color: #aaa;
}
</style>